<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body >

    <div id="app">
        <div v-if="!flag">
            <h4>Vue 入门</h4>
            <p class="msg">{{ msg }} </p>
            <h5 v-on:click="changeText('2107-每天早起背面试题')"> {{ txt }} </h5>
            <h6 v-bind:data-text="txt" > 声明式(HTML) VS 编程式(Javascript)</h6>
            <h4 v-on:click="changeCount" data-message="Are you OK" v-bind:data-count="count" >count == {{count}}</h4>
        </div>
        <div v-if="flag">
            <img v-bind:src="vSrc" v-bind:title="txt" v-bind:alt="msg" width="200" height="200">
        </div>
        <button v-on:click="flag=!flag">点击切换 </button>
        <div v-if="false">
            <ul>
                <li v-for="(l,i) in goods">
                    <a href="">
                        <img v-bind:src="l.goodsImg" alt="">
                    </a>
                    <p class="info">{{l.goodsMsg}}</p>
                    <p class="price"   >
                        ￥<span>{{l.goodsPrice}}</span>
                    </p>
                </li>
            </ul>
        </div>
        <div>
            <p>商品价格 <input type="text" v-model="item.price" ></p>
            <p>商品数量  <input type="number" v-model="item.amount" ></p>
            <p>总价格 : {{item.price * item.amount}} </p>
        </div>
        <div>
            <input type="text" v-bind:value="username"  v-on:input="changeUsername">
            <input type="text" v-model="username" >
            <p v-once>
                username -- {{username}}
            </p>
        </div>
        <div>
            {{tag}}
        </div>
        <div v-text="tag"></div>
        <div v-html="tag"></div>
    </div>


    <div id="myvue">
        <hr>
        <div>
            <h2> {{demo }}</h2>
            <h4> {{ word}}</h4>
            <h4> {{token }}</h4>
        </div>
    </div>

    <script>
        console.log(Vue)
        const goods =  [
            {
                "goodsId": "A001",
                "goodsName": "华为 HUAWEI P40 Pro",
                "goodsMsg": "华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G",
                "goodsImg": "https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg",
                "goodsPrice": 5988
            },
            {
                "goodsId": "A002",
                "goodsName": "Apple iPhone 11",
                "goodsMsg": "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G",
                "goodsImg": "https://img10.360buyimg.com/n7/jfs/t1/41566/13/14792/149059/5d7809a7E99b4ed1b/56ea66c5f8a6f724.jpg",
                "goodsPrice": 5999
            },
            {
                "goodsId": "A003",
                "goodsName": "一加8Pro OnePlus",
                "goodsMsg": "一加8Pro OnePlus 1+8Pro 5G手机2K+120Hz 青空色",
                "goodsImg": "https://img13.360buyimg.com/n7/jfs/t1/131844/26/2030/179283/5ee212b8E6037a065/8ebdf06de22e64e0.jpg",
                "goodsPrice": 5399
            },
            {
                "goodsId": "A003",
                "goodsName": "小米10pro",
                "goodsMsg": "小米10pro 双模5G游戏手机【至高12期分期0首付】 珍珠白 12G+256G",
                "goodsImg": "https://img12.360buyimg.com/n7/jfs/t1/130507/6/2419/623986/5eea0995E7333f0e8/7ebbebf5a6312e30.png",
                "goodsPrice": 4928
            }
        ];
        const vm = new Vue({
            el:"#app",   // document.querySelector 
            data:{
                msg:"2107-daydayup",
                txt:"允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统",
                count:2000,
                vSrc:"http://47.104.209.44/base/img/4.jpg",
                flag:true ,
                goods : goods,
                item:{
                    price:104,
                    amount:50 
                },
                username:'zuozuomu',
                tag:"<h2>hello world</h2>"
            },
            methods:{
                changeUsername(e){
                    this.username = e.target.value   
                },
                changeText(msg){
                    this.msg = msg;
                },
                changeCount(){
                    this.count++;
                    console.log(this)
                }
            }
        })
        console.log(vm);

        // 封装数据绑定 
        function MyVue(options){
            this.options = options;
            this.data = this.options.data;
            this.ele =  document.querySelectorAll(this.options.el)[0];

            this.init();
        }

        MyVue.prototype.init = function(){
            console.log(this.data);
            for(var key in this.data){
                this[key] = this.data[key];  // this.demo = 'demo';
                // replace  
                var reg =  new RegExp("{{" +' {0,}'+key+' {0,}'+"}}","gi");
                this.ele.innerHTML =  this.ele.innerHTML.replace(reg,this[key]);
            }
        }
        

        const my = new MyVue({
            el:"#myvue",
            data:{
                demo:"demo - demo -demo ",
                word:"Are YOU OK",
                token:"wh2107-YYDS"
            }
        })
    </script>

     <!-- 
        开发环境  针对于  开发者  development 
        生产环境  针对于  客户    production     
        Freamwork  Vue =   React + Angular   
        Vue===> view(发音)  侧重视图层   

        Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 
        vm  得到的实例化对象  
        el  属性  document.querySelector(el);   说明Vue的作用范围 
        会将app 里面所有的 DOM 渲染 成 虚拟DOM(?)  存储在 内存中 
        data  Vue 需要初始化的数据  最常见的属性    
        {{ }}  最普遍的模板标记标签  双大括号语法  插值表达式  
        核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
        声明式  直接在 html  书写    a
        编程式  直接在 javascript 书写  location.href 

        响应式  reaction  数据被修改之后  页面里面随之跟着里面更新 (vue提供自动响应式系统)

        强大的指令功能  v-   代替你进行DOM 操作  Attribute  
        v-bind   绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title  绑定动态的属性 
        静态属性  永远不改变 不是变量
        动态属性  接收是变量  (v-bind)  70%
        v-if/v-show  条件渲染  控制显示隐藏  90% 
        v-on 绑定事件  v-on:click  v-on:change v-on:keydown  100% 
        v-for   循环 循环对象 或数组   90%
        v-model  只能绑定在输入框  实现数据双向绑定 (view 视图 + model 数据模型)   90%  
        当你修改 页面的时候  v-model 自动去更新数据层 
        当你修改 数据的时候  v-model 自动去更新视图层 

        v-text   textContent   只接受文本
        v-html   innerHTML     文本和html标签 
        v-once   read-only 
        methods vue 属性  接收方法 

        组件化 组件系统是 Vue 的另一个重要概念 
        允许我们使用小型、独立和通常可复用的组件构建大型应用 
    -->

    <!-- 封装 类似 Vue 实现数据的双向绑定  双大括号语法   -->

</body>
</html>